<template>
  <div class="system">
    <!-- 第一栏开始 -->
     <el-date-picker
     class="one"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right"
      size="small">
    </el-date-picker>
    <el-form  size='small' :model="list" label-width="80px">
   
    <el-select class='two' size="small" v-model="list.type" placeholder="请选择类型">
      <el-option label="充值" value="充值"></el-option>
      <el-option label="消费" value="消费"></el-option>
    </el-select>
    <el-select class="three" size="small" v-model="list.status" placeholder="请选择状态">
      <el-option label="正常" value="正常"></el-option>
      <el-option label="未审核" value="未审核"></el-option>
    </el-select>
    <el-select class="four" size="small" v-model="list.id" placeholder="顾客编号">
      <el-option v-for="item in systems" :key=item.id :label="item.id" :value="item.id"></el-option>
    </el-select>
    <el-button class='btn' size="small" type="primary">查询</el-button>
  </el-form>
    <!-- 第一栏结束 -->
   <!-- 表格开始 -->
  <el-table class="table" :data="systems" style="width: 100%;font-size: 12px;">
      <el-table-column label="编号" type="index" align="center"></el-table-column>
      <el-table-column
        prop="transferMoney"
        label="交易金额"
        align="center"
         >
      </el-table-column>
       <el-table-column label="交易时间" prop="transferTime"  align="center" width='250px'>
         <template slot-scope="scope">
          {{scope.row.transferTime | fmtTime}}
        </template>
       </el-table-column>
       <el-table-column
        prop="type"
        label="交易类型"
        align="center"
        width="300">
      </el-table-column>
       <el-table-column label="状态" prop="status" align="center">
         <template slot-scope="scope">
          <el-tag
          size="mini"
            :type="scope.row.status === '正常' ? 'success' : scope.row.status === '下架' ? 'danger' : 'info'"
            disable-transitions>{{scope.row.status}}</el-tag>
        </template>
       </el-table-column>
      <el-table-column  fixed="right"  label="描述"  prop='description' align="center" >
      </el-table-column>
    </el-table>
   <!-- 表格结束 -->
    <!-- 分页开始 -->
        <div class="pagination">
            <el-pagination  layout="prev, pager, next"  :page-size="list.pageSize"  :total="total"  @current-change='changeHandler'> </el-pagination>
        </div>
        <!-- 分页结束 -->
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
  data(){
    return{
      list:{
        page:1,
        pageSize:10
      },
    }
  },
  computed:{
    ...mapState('system',['systems', 'total'])
  },
  methods: {
    ...mapActions('system',['findAllSystem']),
     //分页
    changeHandler(page){
      this.list.page = page
      this.findAllSystem(this.list)
    },
  },
  created(){
    console.log(this.list);
    this.findAllSystem(this.list)
  }
}
</script>

  

<style>
  .one{
    float: left;
  }
  .two{
    
    margin-left: 20px;
  }
  .three{
    margin-left:20px
  }
  .four{
    margin-left:20px
  }
  .btn{
   margin-left:20px
  }
  .table{
    margin-top: 20px;
  }
  .pagination {
  float:right;
}
</style>